import React, { createContext, useReducer } from 'react';
export const DesignContent = createContext({});

const reduxData = {
  name: '',
  pwd: '',
  color: 'red',
  lan: 'ch',
};

const reducer = (state: object, res: object) => {
  return {
    ...state,
    ...res,
  };
};

export const DesignProvider = (props: any) => {
  //利用useReducer,将当前reducer中需要处理的方法进行导出，
  // useReducer的第一个参数表示要处理的相关逻辑，第二个参数表示初始值
  const [state, dispatch] = useReducer(reducer, reduxData);

  return (
    // 在这里我们使用了useContext进行了状态的共享
    <DesignContent.Provider value={{ state, dispatch }}>
      {props.children}
    </DesignContent.Provider>
  );
};
